<template>
  <a-row :gutter="10">
    <a-col :md="leftColMd" :sm="24">
      <a-card :bordered="false">
        <yks-equipment-list ref="equipmentList" @openSubMenu="openSubMenu" @openMainMenu="openMainMenu"/>
      </a-card>
    </a-col>
    <a-col :md="rightColMd" :sm="24">
      <a-card :bordered="false">
        
        <div style="text-align: right;margin-bottom: -20px;z-index: 1;position:relative">
          <a-tooltip placement="top" title="返回项目列表">
              <a-icon type="close-circle" @click="openMainMenu" />
          </a-tooltip>
        </div>
      
        <a-tabs defaultActiveKey="1" @change="callback">
          <a-tab-pane tab="项目基本信息" key="1" v-if="hasdevopsBaseInfoPermission" forceRender>
            <a-card>
              <a style="margin-left: 17px;">{{'项目代号:'+equipmentProjectcode+' / 基本信息配置'}}</a>
              <yks-equipment-form v-if="hasdevopsBaseInfoPermission" ref="baseInfo" />
              <div class="anty-form-btn">
              <!-- <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button> -->
              <!-- <a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button> -->
            </div>
            </a-card>
          </a-tab-pane>
          <a-tab-pane tab="项目设备基本信息配置" v-if="hasEquipmentDevicesPermission"  key="2" forceRender>
            <yks-device-list v-if="hasEquipmentDevicesPermission"  ref="EquipmentDevices"/>

          </a-tab-pane>
          <!-- <a-tab-pane tab="用户信息" key="2">
            <Dept-User-Info ref="DeptUserInfo" @clearSelectedDepartKeys="clearSelectedDepartKeys"></Dept-User-Info>
          </a-tab-pane>
          <a-tab-pane tab="部门角色" key="3" forceRender>
            <dept-role-info ref="DeptRoleInfo" @clearSelectedDepartKeys="clearSelectedDepartKeys"/>
          </a-tab-pane> -->
          
          <a-tab-pane tab="项目运行配置" v-if="hasEquipmentConfigPlcPermission" key="5" forceRender>
            <a style="margin-left: 17px;">{{'项目代号:'+equipmentProjectcode+' / 运行配置'}}</a>
             <yks-equipment-configuration-plc-list v-if="hasEquipmentConfigPlcPermission" ref="EquipmentConfigPlc" />             
          </a-tab-pane>
          <a-tab-pane :tab="renderTab({title:'项目运维配置'})" v-if="hasEquipmentDevopsConfigPermission" key="10" forceRender>
            <a style="margin-left: 17px;width: 100%;">{{'项目代号:'+equipmentProjectcode+' / '}}{{tabmenukey=='1'?'化学药剂配置':tabmenukey=='1'?'运维材料配置':"运维模块配置"}}</a>
              
               <dev-equipment-config-product-list v-show="tabmenukey == '1'" v-if="hasEquipmentDevopsConfigPermission" ref="EquipmentConfigProduct" />
               <yks-equipment-configuration-part-list v-show="tabmenukey == '2'" v-if="hasEquipmentDevopsConfigPermission" ref="EquipmentConfigPart" /> 
                <!-- <yks-maintenance-template-list  v-show="tabmenukey == '3'" ref="YksMaintenanceTemplateList" />   -->
               
          </a-tab-pane>
          <a-tab-pane tab="项目权限配置" v-if="hasEquipmentUsersPermission" key="4" forceRender>
            <a style="margin-left: 17px;">{{'项目代号:'+equipmentProjectcode+' / 权限配置'}}</a>
            <yks-equipment-manage-users-list v-if="hasEquipmentUsersPermission" ref="EquipmentUsers" /> 
          </a-tab-pane>
          <a-tab-pane tab="实时监控" key="6" forceRender>   
            <yks-camera-list v-if="hasCameraListPermission" ref="cameraList" />
          </a-tab-pane>
          <!-- <a-tab-pane tab="化学药剂配置" key="7" forceRender>
            <dev-equipment-config-product-list ref="EquipmentConfigProduct" />            
          </a-tab-pane> -->
          <!-- <a-tab-pane tab="项目运维模块配置" key="9" forceRender>
            <a style="margin-left: 17px;">{{'项目代号:'+equipmentProjectcode+' / 运维模块配置'}}</a>
              <yks-maintenance-template-list ref="YksMaintenanceTemplateList" /> 
          </a-tab-pane>  -->
          <a-tab-pane tab="项目地图" v-if="hasEquipmentMapPermission"  key="8" forceRender> 
            <a style="margin-left: 17px;">{{'项目代号:'+equipmentProjectcode+' / 设备地图'}}</a>
            <equipment-map v-if="hasEquipmentMapPermission" ref="EquipmentMap" />
          </a-tab-pane>
          
        </a-tabs>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
  import { queryMyDepartTreeList, searchByKeywords } from '@/api/api'
  // import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import DeptRoleInfo from '@/views/system/modules/DeptRoleInfo'
   import YksEquipmentList from './YksEquipmentList.vue'
  import YksCameraList from './YksCameraList.vue'
  import YksEquipmentManageUsersList from '../mng/YksEquipmentManageUsersList.vue'
  import YksEquipmentConfigurationPlcList from './YksEquipmentConfigurationPlcList'
  import YksEquipmentConfigurationPartList from './YksEquipmentConfigurationPartList.vue'
  import DevEquipmentConfigProductList from './DevEquipmentConfigProductList.vue'
  import EquipmentMap from './EquipmentMap.vue'
  import moment from 'moment'
import EquipmentRuningBigscreen from '../mng/EquipmentRuningBigscreen.vue'
import JPopup from '../../../components/jeecg/JPopup.vue'
import JOnlQueryList from '../../../components/jeecg/JOnlQueryList.vue'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
import EquipmentBaseInfo from './modules/EquipmentBaseInfo.vue'
import YksMaintenanceTemplateList from './YksMaintenanceTemplateList.vue'
import YksEquipmentForm from './modules/YksEquipmentForm.vue'
import YksDeviceList from './YksDeviceList.vue'
import YksEquipmentDevopsServiceList from '../srv/YksEquipmentDevopsServiceList.vue'
import { USER_INFO, USER_INFO_PRO,USER_AUTH, SYS_BUTTON_AUTH } from '@/store/mutation-types'

  export default {
    name: 'DepartUserList',
    mixins: [],
    components: {
    YksEquipmentList,
    YksCameraList,
    YksEquipmentManageUsersList,
    YksEquipmentConfigurationPlcList,
    YksEquipmentConfigurationPartList,
    DevEquipmentConfigProductList,
    EquipmentMap,
    moment,
    EquipmentRuningBigscreen,
    JPopup,
    JOnlQueryList,
    EquipmentBaseInfo,
    YksMaintenanceTemplateList,
    YksEquipmentForm,
    YksDeviceList,
    YksEquipmentDevopsServiceList
},
    data() {
      return {
        reportLink:'',
        rightColMd : 0,
        leftColMd : 24,
        currentDeptId: '',
        currentEquipmentId : '',
        model: {},
        checkedKeys: [],
        selectedKeys: [],
        currFlowId : '',
        currFlowName : '',
        labelCol: {
          xs: {span: 24},
          sm: {span: 5}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
        tabmenukey:'',
        tabmenuName:'',
        equipmentProjectcode:'',
        showdeviceTab:false,
        hasdevopsBaseInfoPermission:true,
        hasEquipmentDevicesPermission:true,
        hasEquipmentUsersPermission:true,
        hasEquipmentConfigPlcPermission:true,
        hasEquipmentDevopsConfigPermission:true,
        hasEquipmentMapPermission:true,
        hasCameraListPermission:true,
      }
    },
    mounted(){
      this.handleUrl()
    },
    methods: {
      preCheckPermission() {
      this.hasdevopsBaseInfoPermission=false
      this.hasEquipmentDevicesPermission=false
      this.hasEquipmentUsersPermission=false
      this.hasEquipmentConfigPlcPermission=false
      this.hasEquipmentDevopsConfigPermission=false
      this.hasEquipmentMapPermission=false
      this.hasCameraListPermission=false
      let permissions = sessionStorage.getItem(USER_AUTH)
      if (permissions) {
        permissions = JSON.parse(permissions)
        permissions.forEach((v, k) => 
        {
          if (v.action == 'hasdevopsBaseInfoPermission') {
            this.hasdevopsBaseInfoPermission = true
          }
          if (v.action == 'hasEquipmentDevicesPermission') {
            this.hasEquipmentDevicesPermission = true
          }
          if (v.action == 'hasEquipmentUsersPermission') {
            this.hasEquipmentUsersPermission = true
          }
          if (v.action == 'hasEquipmentConfigPlcPermission') {
            this.hasEquipmentConfigPlcPermission = true
          }
          if (v.action == 'hasEquipmentDevopsConfigPermission') {
            this.hasEquipmentDevopsConfigPermission = true
          }
          if (v.action == 'hasEquipmentMapPermission') {
            this.hasEquipmentMapPermission = true
          }
          if (v.action == 'hasCameraListPermission') {
            this.hasCameraListPermission = true
          }
        })
      }
      
    },
    handleMenuClick(tabKey) {
      this.tabmenukey = tabKey
    },
    renderTab(tab) {
      const menu = (
        <a-menu onClick={({ key }) => this.handleMenuClick(key)}>
          
          <a-menu-item key="1">化学药剂配置</a-menu-item>
          <a-menu-item key="2">运维材料配置</a-menu-item>
        </a-menu>
        // <a-menu-item key="3">运维模块配置</a-menu-item>
      );

      return (
        <a-dropdown overlay={menu} trigger={['click']}>
          <a class="ant-dropdown-link">
            {tab.title} <a-icon type="down" />
          </a >
        </a-dropdown>
      );
    },
       handleUrl:function(){
        const domain = window._CONFIG['domianURL']
        const token = this.$ls.get(ACCESS_TOKEN)
        this.reportLink = `${domain}/jmreport/view/1338769064067076098?token=${token}`
      },
      openSubMenu(record){
         this.rightColMd = 24
         this.leftColMd = 0
         this.currentEquipmentId = record.id
         this.equipmentProjectcode=!record.equipmentProjectcode?'':record.equipmentProjectcode
         this.preCheckPermission()
         if(this.hasEquipmentConfigPlcPermission){
          this.$refs.EquipmentConfigPlc.open(record)
         }
         if(this.hasEquipmentDevicesPermission){
          this.$refs.EquipmentDevices.open(record)
         }
         if(this.hasEquipmentDevopsConfigPermission){
          this.$refs.EquipmentConfigPart.open(record)
         this.$refs.EquipmentConfigProduct.open(record)
         }
         if(this.hasEquipmentMapPermission){
          this.$refs.EquipmentMap.open(record)
         }
         if(this.hasEquipmentUsersPermission){
          this.$refs.EquipmentUsers.currentEquipmentId = this.currentEquipmentId
         this.$refs.EquipmentUsers.projectCode = record.equipmentProjectcode
         this.$refs.EquipmentUsers.loadData()
         }
         if(this.hasdevopsBaseInfoPermission){

          this.$refs.baseInfo.detail(record)
         }
         if(this.hasCameraListPermission) {
          this.$refs.cameraList.open(record)
         }
        //  this.$refs.YksMaintenanceTemplateList.open(record)
          // this.$refs.YksEquipmentDevopsList.open(record,'daily')
          this.showdeviceTab=false
         console.log(record)
      },
      openMainMenu() {
         this.rightColMd = 0
         this.leftColMd = 24
      },
      callback(key) {
        console.log(key)
        if (key == '8') {
          this.$refs.EquipmentMap.myMapRefresh(moment(new Date()).format('YYYY-MM-DD HH:MM:SS'))
        }    
        if (key == '10')    {
          // debugger
          // this.$refs.onlQueryList.openModal()

        }
      },
      projectcallback(key) {
        debugger
        //console.log(key)
        if (key == '3') {
          this.showdeviceTab=true
        }    
        else{
          this.showdeviceTab=false
        }
      },
      clearSelectedDepartKeys() {
        this.checkedKeys = [];
        this.selectedKeys = [];
        this.currentDeptId = '';
        this.$refs.DeptUserInfo.currentDeptId='';
        this.$refs.DeptRoleInfo.currentDeptId='';
      },

    },
    created() {
      this.currFlowId = this.$route.params.id
      this.currFlowName = this.$route.params.name
      // this.loadTree()
    },
  }
</script>
<style scoped>
.anty-form-btn {
    width: 100%;
    text-align: right;
  }

  .anty-form-btn button {
    margin: 0 5px;
  }
  .ant-dropdown-link{
    color: gray;
  }
 
  
  @import '~@assets/less/common.less'
</style>